<template>
    <a href="javascript:;" class="se-item" @click="goTodetail">
        <h4 class="title" v-html="highLightKeywords(data.title,keyword)"></h4>
        <!-- 默认配图时为上下结构 -->
        <!-- 如果需要左右结构 加class row -->
        <!-- 不用管他是否有图片，没有的时候不渲染图片标签即可-->
        <div class="mainbody"
            :class="(data.hasOwnProperty('show_type')&&data.show_type==1) || data.hasOwnProperty('url') ?'row':''">
            <img class="cover" v-if="data.img||data.src_text" v-lazy="data.img||data.src_text" :alt="data.title" />
            <div class="intro" v-if="data.hasOwnProperty('desc_text')"
                v-html="highLightKeywords(data.desc_text,keyword)"></div>
            <div class="intro" v-else-if="data.hasOwnProperty('list')">
                <p v-for="(item, index) in data.list" :key="index" class="one-ellipsis">{{index + 1}}.{{item.title||''}}
                </p>
            </div>
            <div class="intro" v-else-if="data.hasOwnProperty('content')"
                v-html="highLightKeywords(data.content,keyword)"></div>
        </div>
        <div class="linkInfo" v-if="data.hasOwnProperty('name')">
            <a class="link" v-if="data.hasOwnProperty('name')">{{data.name}}</a>
            <!-- <a class="link"  v-else-if="data.hasOwnProperty('linkurl')" :href="data.linkurl">{{data.linkurl}}</a>
      <a class="link"  v-else="data.hasOwnProperty('url')" :href="data.url">{{data.url}}</a>-->
            <i class="icon icon-bao" v-if="data.hasOwnProperty('linkurl')"></i>
            <em class="admark" v-if="data.hasOwnProperty('linkurl')">广告</em>
        </div>
        <div class="linkInfo" v-else>
            <a class="link">AE搜索</a>
        </div>
    </a>
</template>


<style lang="scss">
    .se-item {
        width: 100%;
        background: #fff;
        padding: 16px 35px 16px;
        margin-bottom: 30px;
        display: block;
        text-decoration: unset;

        .title {
            color: #020202;
            font-size: 36px;
            font-weight: bold;
            line-height: 60px;
            margin: 0;

            .highlight {
                color: #ec3616;
            }
        }

        .one-ellipsis {
            height: 50px;
            margin: 0;
            padding: 0;
            // font-size: 36px;
            line-height: 50px;
        }

        .mainbody {
            display: flex;
            flex-direction: column;
            margin-top: 16px;

            .cover {
                width: 680px;
                max-height: 320px;
                object-fit: cover;
                border-radius: 6px;
                background: #999;
            }

            .intro {
                font-size: 26px;
                font-weight: 400;
                color: rgba(92, 92, 92, 1);
                line-height: 54px;
                // margin-top: 15px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                max-height: 200px;
                word-break: break-all;

                * {
                    font-size: 26px;
                    line-height: 54px;
                }
            }

            // 左右布局
            &.row {
                flex-direction: row;

                .cover {
                    width: 220px;
                    max-height: 176px;
                }

                img+.intro {
                    width: 450px;
                    max-height: 160px;
                    margin-top: 0;
                    margin-left: 15px;
                    margin-bottom: 0;
                }
            }
        }

        .linkInfo {
            height: 30px;
            margin-top: 18px;
            display: flex;
            align-items: flex-start;

            .link {
                height: 26px;
                font-size: 20px;
                font-weight: 400;
                color: rgba(196, 196, 196, 1);
                font-style: normal;
                text-decoration: none;
                max-width: 340px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }

            .icon-bao {
                height: 30px;
                width: 30px;
                background: url(/images/save.png);
                background-size: 100%;
                background-repeat: no-repeat;
                margin-left: 20px;
            }

            .admark {
                height: 26px;
                font-size: 22px;
                font-weight: 400;
                color: rgba(140, 169, 236, 1);
                font-style: normal;
                margin-left: 17px;
            }
        }
    }
</style>

<script>
    import Vue from "vue";
    import {
        Lazyload
    } from 'mint-ui';
    Vue.use(Lazyload);
    export default {
        name: "searchItem",
        props: {
            keyword: {
                type: String,
                value: () => {
                    return ""
                }
            },
            data: {
                type: Object,
                value: () => {
                    return {}
                },
            }
        },
        methods: {
            goTodetail() {
                let url = this.data.linkurl || this.data.url
                if (url && url != "#") {
                    window.open(url)
                }
            },
            //高亮关键字 text =>内容  words:关键词   tag 被包裹的标签
            //匹配每一个关键字字符
            highLightKeywords(text, words, tag) {
                tag = tag || 'span'; // 默认的标签，如果没有指定，使用span
                var i, len = words.length,
                    re;

                re = new RegExp(words, 'gi');
                if (re.test(text)) {
                    text = text.replace(re, '<' + tag + ' class="highlight">$&</' + tag + '>');
                }
                return text;
            }
        }
    }
</script>